<template>
	<view class="wanlshop-category-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed bg-white solid-bottom" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px'
				}">
				<view class="action" @tap="handleGroups">
					<!-- <text class="wlIcon-pintuan3"></text> -->
					<image src="https://fen.fuliaoxx.com/img/new/fl/zt.png" style="width: 36rpx;height: 32.66rpx;"
						mode=""></image>
					<!-- <view class="cu-tag badge">拼</view> -->
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
						<swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
						<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
							@tap="productSearch(item.keywords)">
							{{ item.keywords }}
						</swiper-item>
					</swiper>
					<view class="searchbtn">
						搜索
					</view>
				</view>
				<!-- #ifndef MP -->
				<view class="lan">
					<text style="margin-right: 12rpx;">中文</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 选项 -->
		<view class="tabs">
			<view class="tabsbox">
				<view :class="curtab==index?'active':''" class="tabs__item" v-for="(item,index) in tabs" :key="index"
					@click="changeCurtab(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="curtab==1" style="overflow: auto;height: calc(100vh - 130rpx);">
			<view class=""
				style="margin: 30rpx;display: flex;flex-direction: column;align-items: center;box-shadow: 1rpx 3rpx 8rpx #dcdcdc;margin-top: 10rpx;padding: 20rpx;border-radius: 20rpx;background-color: white;"
				v-for="(item,index) in ppgList" :key="index" @click="nav1(item)">
				<view class="" style="margin-bottom: 10rpx;text-align: center;font-size: 34rpx;">
					{{item.name}}
				</view>
				<image :src="$wanlshop.oss(item.image, 400, 0)" mode="aspectFill"
					style="border-radius: 20rpx;width: 100%;"></image>
			</view>
			<view class="" style="height: 200rpx;">

			</view>
		</view>
		<!-- 加载类目 -->
		<wanl-shop-classify :mainHeight="height" :categoryStyle="parseInt(common.appStyle.category_style)"
			:categoryData="common.modulesData.categoryModules" :adverData="common.adData.categoryAdverts"
			v-if="curtab==0" />
		<!-- 模态框 -->
		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()"
				v-if="curtab==0">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal()">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share ref="wanlShare" page="pages/category" :scene="{qr:'c'}"
						:scrollAnimation="scrollAnimation" @change="hideModal" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import wanlShopClassify from '@/components/wanl-shop/classify';
	export default {
		data() {
			return {
				height: 0,
				modalName: null,
				ppgList: [],
				scrollAnimation: 300,
				tabs: [{
						name: '商品'
					},
					{
						name: '品牌'
					},
				],
				curtab: 0,
				tabsheight: 65
			};
		},
		components: {
			wanlShopClassify
		},
		computed: {
			...mapState(['common', 'statistics', 'cart'])
		},
		onLoad() {
			let wanlsys = this.$wanlshop.wanlsys();
			let tabsheight = this.tabsheight
			// #ifdef APP-PLUS
			this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - tabsheight;
			// #endif
			// #ifdef H5
			this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50 - tabsheight;
			// #endif
			// #ifdef MP
			this.height = wanlsys.windowHeight - wanlsys.height - tabsheight;
			// #endif
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		async onShow() {
			await uni.request({
				url: '/wanlshop/find/find/getbrandList',
				success: res => {
					// this.ppgList = res.data.data;
					console.log(res)
					this.ppgList = res.data;
				}
			});
		},
		methods: {
			nav1(item) {
				uni.navigateTo({
					url: "/pages/product/list2?id=" + item.id
				})
			},
			changeCurtab(index) {
				if (this.curtab == index) return;
				this.curtab = index;

			},
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			handleGroups() {
				// this.$wanlshop.to('/pages/apps/groups/index');
				this.$wanlshop.to('/pages/product/typegoods?title=拼团推荐');

			},
			productSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	};
</script>

<style>
	.cu-custom .cu-bar {
		z-index: 99;
	}

	.cu-bar .action {
		position: relative;
	}

	/* #ifdef MP */
	.cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */
	.searchbtn {
		width: 110rpx;
		height: 52rpx;
		background: #000000;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
		flex-shrink: 0;
	}
</style>
<style lang="scss">
	.tabs {
		padding: 30rpx 46rpx 24rpx;
		background-color: #fff;

		&__item {
			width: 300rpx;
			height: 63rpx;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: .6;
			font-size: 30rpx;
		}

		.active {
			background: #FFFFFF;
			font-weight: 900;
			opacity: 1;
		}

		.tabsbox {
			width: 642rpx;
			height: 76rpx;
			background: #F9F9F9;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			padding: 0 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>